
<style scoped>
.handle-box{
  margin: 0 0 20px;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 代 理 省 市 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="addContent" size="mini">新增省代理</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="name" label="省份名称" align="center"></el-table-column>
                <el-table-column prop="code" label="行政区划编码" align="center"></el-table-column>
                <el-table-column prop="cost" label="代理费用" align="center"></el-table-column>
                <el-table-column prop="createdtime" label="	创建时间" width="150" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="searchDetail(scope.row)">修改</el-button>
                        <!-- <el-button size="mini" type="primary" @click="updateDetail(scope.row)">修改</el-button> -->
                        <el-button size="mini" type="danger" @click="deleteDetail(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="修改" :visible.sync="senInfoShow" width="40%">
            <el-form ref="send" :model="updateFrom" label-width="100px">
                <el-form-item label="省份名称:">
                    <el-input v-model="updateFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="行政区划编码:">
                    <el-input v-model="updateFrom.code" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="代理费用:">
                    <el-input v-model="updateFrom.cost" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增" :visible.sync="addShow" width="40%">
            <el-form ref="send" :model="addFrom" label-width="100px">
                <el-form-item label="省份名称:">
                    <el-input v-model="addFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="行政区划编码:">
                    <el-input v-model="addFrom.code" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="代理费用:">
                    <el-input v-model="addFrom.cost" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addShow = false">取 消</el-button>
                <el-button type="primary" @click="addSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="详情" :visible.sync="detailShow" width="80%">
            <el-form ref="send" :model="fromDetail" label-width="100px">
                <el-form-item label="省份名称:">
                    <el-input v-model="fromDetail.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="行政区划编码:">
                    <el-input v-model="fromDetail.code" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="代理费用:">
                    <el-input v-model="fromDetail.cost" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="代理市:">
                  <el-button style="margin:0 0 10px" size="mini" type="primary" @click="addCity(fromDetail)">新增市代理</el-button>
                  <el-table :data="fromDetail.cityList" border class="table"  header-cell-class-name="table-header">
                      <el-table-column prop="provinceName" label="所属省份" align="center"></el-table-column>
                      <!-- <el-table-column prop="provinceId" label="所属省份ID" align="center"></el-table-column> -->
                      <el-table-column prop="code" label="编码" align="center"></el-table-column>
                      <el-table-column prop="name" label="市名称" align="center"></el-table-column>
                      <el-table-column prop="cost" label="代理费用" align="center"></el-table-column>
                      <el-table-column prop="createdtime" label="	创建时间" width="150" align="center"></el-table-column>
                      <el-table-column label="操作" width="150" align="center">
                          <template slot-scope="scope">
                              <el-button size="mini" type="primary" @click="updateCityDetail(scope.row)">修改</el-button>
                              <el-button size="mini" type="danger" @click="deleteCityDetail(scope.row)">删除</el-button>
                          </template>
                      </el-table-column>
                  </el-table>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailShow = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增" :visible.sync="addCityShow" width="40%">
            <el-form ref="send" :model="addCityFrom" label-width="100px">
                <el-form-item label="市名称:">
                    <el-input v-model="addCityFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="行政区划编码:">
                    <el-input v-model="addCityFrom.code" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="代理费用:">
                    <el-input v-model="addCityFrom.cost" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCityShow = false">取 消</el-button>
                <el-button type="primary" @click="addCitySend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="updateCityShow" width="40%">
            <el-form ref="send" :model="updateCityFrom" label-width="100px">
                <el-form-item label="市名称:">
                    <el-input v-model="updateCityFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="编码:">
                    <el-input v-model="updateCityFrom.code" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="代理费用:">
                    <el-input v-model="updateCityFrom.cost" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateCityShow = false">取 消</el-button>
                <el-button type="primary" @click="sureCitySend">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingProvince, UpdateProvince, DeleteProvince,AddProvince,AgentProvinceInfo,AddCity,UpdateCity,DeleteCity } from '@/api/area';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20
            },
            tableData: [],
            pageTotal: 0,
            updateFrom: {},
            senInfoShow: false,
            addShow: false,
            addFrom: {},
            fromDetail:{},
            detailShow:false,
            addCityShow:false,
            addCityFrom:{},
            updateCityShow:false,
            updateCityFrom:{}
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
      sureCitySend() {
        this.updateCityFrom.provinceId = this.fromDetail.id
        UpdateCity(this.updateCityFrom).then(res => {
          if (res.RequestStatus == 200) {
              this.$message.success('成功');
              this.searchDetail({id:this.fromDetail.id});
              this.updateCityShow = false;
              this.updateCityFrom = {}
          } else {
              this.$message.error(res.Message);
          }
        })
      },
      deleteCityDetail(row) {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    DeleteCity({ id: row.id }).then((res) => {
                        this.$message.success('成功');
                        this.searchDetail({id:this.fromDetail.id});
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
      },
      updateCityDetail(row) {
        this.updateCityFrom = JSON.parse(JSON.stringify(row))
        this.updateCityShow = true
      },
      addCitySend() {
        AddCity(this.addCityFrom).then(res => {
          if (res.RequestStatus == 200) {
              this.$message.success('成功');
              this.searchDetail({id:this.fromDetail.id});
              this.addCityShow = false;
              this.addCityFrom = {}
          } else {
              this.$message.error(res.Message);
          }
        })
      },
      addCity(row){
        this.addCityFrom.provinceId = row.id
        this.addCityShow = true
      },
        addContent() {
          this.addFrom = {}
          this.addShow = true
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingProvince(this.query).then((res) => {
                console.log(res);
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(row){
          AgentProvinceInfo({id:row.id}).then(res => {
            console.log(res)
              this.detailShow = true
              this.fromDetail = res.Data;
          })
        },
        updateDetail(row) {
            this.updateFrom = JSON.parse(JSON.stringify(row));
            this.senInfoShow = true;
        },
        sureSend() {
            delete this.fromDetail['createdtime'];
            UpdateProvince(this.fromDetail).then((res) => {
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.detailShow = false;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        deleteDetail(row) {
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    DeleteProvince({ id: row.id }).then((res) => {
                        if(res.RequestStatus == 204){
                            this.$message.success('成功');
                            this.getList();
                        }else{
                            this.$message.error(res.Message)
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        addSend() {
          AddProvince(this.addFrom).then(res => {
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.addShow = false;
                } else {
                    this.$message.error(res.Message);
                }
          })
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>